<template>
  <el-card>
    <div slot="header">重置密码</div>

    <el-form
      label-width="95px"
      :model="params"
      :rules="rules"
      style="width: 500px"
      ref="_Form"
    >
      <el-form-item prop="old_pwd" label="原密码">
        <el-input placeholder="请输入旧密码" v-model="params.old_pwd" />
      </el-form-item>
      <el-form-item prop="new_pwd" label="新密码">
        <el-input type="password" placeholder="请输入新密码" v-model="params.new_pwd" />
      </el-form-item>
      <el-form-item prop="re_pwd" label="确认新密码">
        <el-input type="password" placeholder="请再次输入新密码" v-model="params.re_pwd" />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="changePassword">修改密码</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { resetPassword } from '@/utils/calidate-Rules'
import { updatePwd } from '@/api/user'
import { removeTokenFormStorage } from '@/utils/storage'
import router from '@/router'

export default {
  data () {
    return {
      params: {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      },
      rules: ''
    }
  },
  created () {
    const inspectionPwd = (rules, value, callback) => {
      if (value !== this.params.new_pwd) {
        return callback(new Error('新密码不一致'))
      } else {
        callback()
      }
    }
    resetPassword.re_pwd.push({
      trigger: 'blur',
      validator: inspectionPwd
    })
    this.rules = resetPassword
  },
  methods: {
    changePassword () {
      this.$refs._Form.validate(res => {
        if (res) {
          updatePwd(this.params).then(resulut => {
            this.$message.success(resulut.message)
            removeTokenFormStorage()
            this.$store.commit('user/changeToken', null)
            router.push('/login')
          })
        }
      })
    },
    reset () {
      this.$refs._Form.resetFields()
    }
  }
}
</script>

<style></style>
